<template>
	<view>
		<view class="top">
			<vol-form-com
				:mapShow="mapShow"
				@input-confirm="inputConfirm"
				:labelWidth="labelWidth"
				:load-key="false"
				ref="form"
				@extraClick="gridExtraClick"
				@uploadBefore="editGridFormUploadBefore"
				:form-options.sync="editFormOptions"
				:formFields.sync="editFormFields"
				@setFileUrl="setFileUrl"
			></vol-form-com>
		</view>
		<view class="submit">
			<u-button text="取消" type="info" @click="cancelFn"></u-button>
			<u-button text="提交" type="primary" @click="submitFn"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'paymentView',
		data() {
			return {
				mapShow:false,
				fileUrl: '', //上传的文件在数据库地址
				id:'',
				labelWidth: 80, //编辑弹出框表单标签的宽度
				editFormOptions: [
					{
						key: "结账类型",
						title: "付款方式",
						required: true,
						field: "Payment_way",
						data: [
							{
							    "key": "0",
							    "value": "电汇"
							},
							{
							    "key": "1",
							    "value": "支票"
							},
							{
							    "key": "2",
							    "value": "现金"
							},
							{
							    "key": "3",
							    "value": "微信"
							},
							{
							    "key": "4",
							    "value": "支付宝"
							},
							{
							    "key": "5",
							    "value": "承兑"
							},
							{
							    "key": "6",
							    "value": "其他"
							},
						],
						placeholder: "付款方式",
						type: "select",
					},
					{
						title: "付款时间",
						field: "Payment_date",
						type: "datetime",
						required: true,
					},
					{
						title: "图片",
						field: "Payment_image",
						type: "img",
						url:'',
					},
					{
						title: "附件",
						field: "Payment_file",
						type: "file",
						url:''
					},
				],
				editFormFields: {},
			}
		},
		watch: {
			editFormFields: {
				handler(newValue, oldValue) {
					console.log('editFormFields发生变化1231', newValue);
				},
				deep: true
			},
		},
		onLoad(params) {
			this.id = params.id;
			let ip = this.http.ipAddress;
			let path = this.$route.path;
			for(let i=0;i<this.editFormOptions.length;i++){
				let infoItem = this.editFormOptions[i]
				if(infoItem.field == 'Payment_image' || infoItem.field == 'Payment_file'){
					infoItem.url = 'api'+'/q_purchase_payment'+"/Upload"
				}
			}
			console.log(this.editFormOptions);console.log("this.editFormOptions")
		},
		created() {},
		onShow() {},
		methods: {
			cancelFn(){
				uni.navigateBack();
			},
			submitFn(){
				console.log(this.editFormFields,"提交按钮")
			},
			inputConfirm(field, e) {
				//input回车事件
				console.log(field);
			},
			gridExtraClick(option, fields) {
				
			},
			editGridFormUploadBefore(fields, option, done) {
				
			},
			setFileUrl(val) {
				// console.log('emit时间', val);
				this.fileUrl = val;
			},
		}
	}
</script>

<style lang="less" scoped>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.box {
	height: calc(100% - 100rpx);
	padding: 10rpx;
	// background-color: pink;
	overflow: auto;
}

.center {
	display: flex;
	padding: 20rpx;
	// background-color:#eee;
	border-top: 2rpx solid #eee;
	.empty {
		width: 50%;
	}
	.u-button {
		flex: 1;
		margin-left: 10rpx;
	}
}
.centerTittle {
	display: flex;
	padding: 30rpx;
	// background-color:##4c4c4c;
	border-bottom: 2rpx solid #eee;
	justify-content: space-between;
	.empty {
		width: 50%;
		color: #4c4c4c;
		font-size: 30rpx;
	}
	.u-button {
		flex: 0.5;
		margin-left: 10rpx;
	}
}
.bootom {
	// padding-bottom: 100rpx;
}
.submit {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 10rpx;
	background-color: #eee;
	.u-button {
		height: 80rpx;
		width: 49%;
	}
}
.alert {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, .5);
	position: fixed;
	top: 0;
	left: 0;
}
.alert-body {
	background-color: white;
	padding: 10px 20px 20px 20px;
	border-radius: 10px;
	width: 90%;
}
.alert-title{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.alert-close,.alert-sure {
	float: right;
	cursor: pointer;
	padding: 10rpx;
}
.alert-sure{
	color: #3c9cff;
}
.table-cell:last-child {
  position: sticky; /* 使用sticky定位 */
  right: 0; /* 固定在右侧 */
  background-color: #fafafa; /* 设置背景色，确保在滚动时可见 */
  z-index: 10; /* 确保在其他单元格之上 */
}
.uni-container{
	height: 500px;
	overflow-y: scroll;
}
.trTable{
	height: 20px;
}
.sticky-header {
    position: sticky;
    top: 0;
    background-color: #fafafa; /* 设置背景颜色，避免表头与表格内容重叠时看不清 */
    z-index: 18888; /* 设置层级，确保表头在其他内容之上 */
}
.uni-table-th{
	color: #424242;
}
</style>